<template>
  <div class="dashboard-container">
    <div class="dashboard-text">文具商城后台管理</div>
    <div style="width: 400px">
      <el-form
        ref="updateForm"
        :model="updateForm"
        :rules="updateRules"
        auto-complete="on"
        label-position="left"
      >
        <div class="title-container">
          <h3 class="title">用户账号:{{ id }}</h3>
        </div>

        <el-form-item prop="username">
          <span class="svg-container">
            <svg-icon icon-class="user" />
            <span>用户名</span>
          </span>
          <el-input
            ref="username"
            v-model="updateForm.username"
            name="username"
            :placeholder="name"
            type="text"
            tabindex="1"
            auto-complete="off"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item prop="phone">
          <span class="svg-container">
            <i class="el-icon-phone"></i>
            <span>电话</span>
          </span>
          <el-input
            ref="phone"
            v-model="updateForm.phone"
            name="phone"
            :placeholder="phone"
            tabindex="2"
            auto-complete="off"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item prop="address">
          <span class="svg-container">
            <i class="el-icon-house"></i>
            <span>地址</span>
          </span>
          <el-input
            ref="address"
            v-model="updateForm.address"
            name="address"
            :placeholder="address"
            tabindex="3"
            auto-complete="off"
            autocomplete="off"
          />
        </el-form-item>

        <el-button
          :loading="loading"
          type="primary"
          style="width: 100%; margin-bottom: 30px"
          @click.native.prevent="handleUpdate"
          >修改信息</el-button
        >
      </el-form>
      <a v-if="id!='admin'" @click="dialogFormVisible = true">修改密码</a>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm">
        <el-form-item label="原密码" :label-width="formLabelWidth" prop="oldPassword">
          <el-input
            ref="oldPassword"
            v-model="passwordForm.oldPassword"
            autocomplete="off"
            tabindex="4"
            auto-complete="off"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth" prop="password">
          <el-input
            ref="password"
            v-model="passwordForm.password"
            autocomplete="off"
            tabindex="5"
            auto-complete="off"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="重新输入" :label-width="formLabelWidth" prop="rePassword">
          <el-input
            ref="rePassword"
            v-model="passwordForm.rePassword"
            autocomplete="off"
            tabindex="6"
            auto-complete="off"
            type="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="id!='admin'" type="primary" @click="updatePassword" >修改密码</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error("用户名不能小于5位"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error("密码不能小于5位"));
      } else {
        if (this.passwordForm.rePassword !== "") {
          this.$refs.passwordForm.validateField("rePassword");
        }
        callback();
      }
    };
    const validateRePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passwordForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (value.length !== 11) {
        callback(new Error("请确认手机号为11位"));
      } else {
        callback();
      }
    };
    const validateAddress = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入地址"));
      } else {
        callback();
      }
    };
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      passwordForm: {
        rePassword: "",
        oldPassword: "",
        password: "",
        
      },
      updateForm: {
        id: "",
        username: "",
        phone: "",
        address: "",
      },
      updateRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        phone: [{ required: true, trigger: "blur", validator: validatePhone }],
        address: [
          { required: true, trigger: "blur", validator: validateAddress },
        ],
      },
      passwordRules: {
        oldPassword: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
        rePassword: [
          { required: true, trigger: "blur", validator: validateRePassword },
        ],
      },
      loading: false,
    };
  },
  computed: {
    ...mapGetters(["name", "id", "phone", "address"]),
  },
  mounted() {
    this.updateForm.id = this.id;
    this.updateForm.username = this.name;
    this.updateForm.phone = this.phone;
    this.updateForm.address = this.address;
  },
  methods: {
    handleUpdate() {
      //验证表单元素是否符合规则
      this.$refs.updateForm.validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("user/update", this.updateForm)
            .then(() => {
            })
            .catch(() => {
            });
        }
      });
    },
    updatePassword() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("user/updatePassword", this.passwordForm)
            .then(() => {
              alert("修改成功")
              this.dialogFormVisible=false;
            })
            .catch(() => {
              alert("修改失败")
              this.dialogFormVisible=false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
